<template>
  <div>
    <!-- 公共头 -->
    <component-head />
    <!-- 页面头 -->
    <div class="head">
      <!-- 三目判断是否有active -->
      <span
      @click="sort('sale')"
      :class="['sort', 'sale', {active: sorts.order === 'sale'}]">销量</span>
      <span
      @click="sort('news')"
      :class="['sort', 'news', {active: sorts.order === 'news'}]">新品</span>
      <div
      @click="angle()"
      :class="['sort', 'pic', {active: sorts.order === 'pic'}]">   价格
             <span :class="['angle-b', {active: sorts.updown === 0}]"></span>
             <span :class="['angle-t', {active: sorts.updown === 1}]"></span>
      </div>
      <button class="sort screen">筛选<van-icon name="filter-o" /></button>
    </div>
    <!-- 循环主体 -->
    <recommend-item :items="items" @detail="details" :isshow="isshow"/>
    <!-- 底部 -->
    <tabbar />
  </div>
</template>

<script>
import ComponentHead from '../../components/ComponentHead'
import RecommendItem from './components/RecommendItem'
import { recommendItem } from '../../api/index'
import Tabbar from '../../components/Tabbar.vue'
export default {
  data () {
    return {
      items: [],
      sorts: {
        order: 'sale', // 切换类 定义排序规则sale news pic
        updown: '' //  0升序 1 降序
      },
      word: '',
      isshow: false
    }
  },
  // 获取初始值
  created () {
    // 判断进入的页面
    if (this.$route.query.word) {
      this.fetch()
    } else {
      this.fetchItems()
    }
  },
  methods: {
    // 切换高亮类直接请求
    sort (sort) {
      // 判断是否搜索页面进入
      if (this.$route.query.word) {
        this.sorts.order = sort
        this.sorts.updown = ''
        this.fetch()
      } else {
        this.sorts.order = sort
        this.sorts.updown = ''
        this.fetchItems()
      }
    },
    // 切换高亮类请求做二次判断
    angle () {
      // 判断是否搜索页面进入
      if (this.$route.query.word) {
        // 判断高亮是否在价格
        if (this.sorts.order !== 'pic') {
          this.sorts.updown = 1
          this.sorts.order = 'pic'
        } else {
          if (this.sorts.updown === 0) {
            this.sorts.updown = 1
          } else {
            this.sorts.updown = 0
          }
        }
        this.fetch()
      } else {
        if (this.sorts.order !== 'pic') {
          this.sorts.updown = 1
          this.sorts.order = 'pic'
        } else {
          if (this.sorts.updown === 0) {
            this.sorts.updown = 1
          } else {
            this.sorts.updown = 0
          }
        }
        this.fetchItems()
      }
    },
    // 详情页
    details (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 主页进入初始渲染
    fetchItems () {
      recommendItem({
        categoryId: this.$route.query.cateId,
        // 排序方式
        orderBy: this.orderBy
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
          this.isshow = true
        }
      })
    },
    // 搜索页进入初始渲染
    fetch () {
      recommendItem({
        k: this.$route.query.word,
        orderBy: this.orderBy
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
          this.isshow = true
        }
      })
    }
  },
  computed: {
    // 监听order变化
    orderBy () {
      let order = 'sale'
      switch (this.sorts.order) {
        case 'sale':
          order = 'ordersDown'
          break
        case 'news':
          order = 'addedDown'
          break
        case 'pic':
          if (this.sorts.updown === 0) {
            order = 'priceUp'
          } else {
            order = 'priceDown'
          }
          break
        default:
          break
      }

      return order
    }
  },
  components: { ComponentHead, Tabbar, RecommendItem }
}
</script>

<style lang="scss" scoped>
.head {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.4rem;
  color: #333;
  .sort {
    &.active {
      color: #884e22;
    }
    &.pic {
      display: flex;
      position: relative;
      .angle-t {
        width: 0px;
        height: 0px;
        border-top: 5px solid #333;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        position: absolute;
        top: 12px;
        left: 32px;
        &.active{
        border-top: 5px solid #884e22;
        }
      }
      .angle-b {
        width: 0px;
        height: 0px;
        border-bottom: 5px solid #333;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        position: absolute;
        top: 4px;
        left: 32px;
        &.active{
        border-bottom: 5px solid #884e22;
        }
      }
    }
  }
  .screen {
    background-color: #f7f9fa;
    font-size: 0.35rem;
    border: none;
    color: #555;
    padding: 0 0.3rem;
  }
}
</style>
